<template>
<div id="orders" class="bg-assist">
	<sub-page-header title="我的订单" :triggerBack="true" @back="$router.push('/me');"></sub-page-header>
	<div class="nav-border">
		<ul class="nav" style="width: 600px;">
			<li @click="changeStatus(-1)" :class="status == -1 ? 'active' : ''">全部</li>
			<li @click="changeStatus(0)" :class="status == 0 ? 'active' : ''">待付款</li>
			<li @click="changeStatus(1)" :class="status == 1 ? 'active' : ''">待发货</li>
			<li @click="changeStatus(2)" :class="status == 2 ? 'active' : ''">待收货</li>
			<li @click="changeStatus(3)" :class="status == 3 ? 'active' : ''">待评价</li>
			<!-- <li @click="changeStatus(4)" :class="status == 4 ? 'active' : ''">退款/售后</li> -->
		</ul>	
	</div>
	
	<div v-if="!orders.length" class="empty" style="margin-top:100px; min-height: 500px;">
		<img src="../../assets/none_order.png" alt="">
		<p>你还没有相关的订单</p>
	</div>
	<div class="orders">
		<div v-for="(order, index) in orders" class="order" :key="order.id">
			<div class="order-header clearfix">
				<span class="pull-left">{{order.create_time}}</span>
				<span class="pull-right text-price">{{order.status_text}}</span>
			</div>
			<div class="order-goods">
				<div v-for="item in order.items" class="goods clearfix" :key="order.id+'-'+item.id">
					<img :src="item.product.thumbnail" alt="">
					<div class="info">
						<p>{{item.product.title}}</p>
						<p class="bottom">
							<span class="text-price">£{{item.item ? item.item.price : ''}}</span>
							<span class="pull-right">x{{item.qty}}</span>
						</p>
					</div>
				</div>
			</div>
			<div class="order-footer">
				<div class="text-right">
					共计{{order.items ? order.items.length : 0}}件商品 合计：£{{order.total}} (含运费 £{{order.shipping_fee}})
				</div>
				<div class="text-right btns">
					<router-link :to="'/me/order/detail/'+order.id" tag="button" class="btn btn-normal">查看详情</router-link>
					<button v-if="order.status == 8 || order.status == 9" @click="handleDeleteOrder(index, order)" class="btn btn-normal">删除订单</button>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import api from '~/api/api.js';

export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			inLoading: false,
			current_page: 0,
			next_page: 1,
			total: 0,
			status: 0, 
			orders: []
		}
	},
	created () {
		var vue = this;
		this.status = this.$route.query.status ? this.$route.query.status : 0;
		window.addEventListener('scroll', this.checkScroll);
		this.loadData();
	},
	beforeDestroy () {
		window.removeEventListener('scroll', this.checkScroll);
	},
	methods: {
		checkScroll (e) {
			let element = document.body;
			if (element.scrollHeight - element.scrollTop === element.clientHeight) {
				this.loadData();
			}
		},
		changeStatus (value) {
			this.status = value;
			this.initPage();
			this.loadData();
		},
		initPage () {
			this.next_page = 1;
			this.current_page = 0;
			this.total = 0;
		},
		loadData () {
			let vue = this;
			if (this.next_page == 0) {
				return;
			}
			vue.inLoading = true;
			api.get(`/order/index?status=${this.status}`)
			.then(function (response) {
				vue.inLoading = false;
				var page = response.data;
				vue.next_page = page.next_page;
				vue.current_page = page.current_page;
				vue.total = page.total;
				if(vue.current_page == 1) {
					vue.orders = page.data;
				} else {
					vue.orders = vue.orders.concat(page.data);
				}
			})
			.catch(function (error) {
				vue.$message.error('加载失败');
			})
		},
		handleDeleteOrder (index, order) {
			api.post('/order/delete/'+order.id)
			.then(response => {
				this.$message.success('删除成功');
				this.orders.splice(index, 1);
			});
		}
	}
}
</script>

<style scoped>
	.nav-border {
		border-bottom: 1px solid #eaeaea;
		width: 100%;
		height: 43px;
		overflow: hidden;
		overflow-x: scroll;
	}
	.nav-border li {
		padding: 10px 0px;
		width: 100px;
		text-align: center;
	}

	.order {
		margin-bottom: 10px;
		background-color: #fff;
	}

	.order .order-header, .order .order-goods {
		padding: 10px;
		border-bottom: 1px solid #eaeaea;
		overflow: hidden;	
	}

	.order .order-goods .goods {
		margin-bottom: 5px;
	}

	.order .order-goods .goods img {
		width: 84px;
		height: 84px;
		float: left;
	}

	.order .order-goods .goods .info {
		padding-left: 94px;
	}

	.order .order-footer {
		padding: 10px;
	}

	.order .order-footer .btns {
		margin-top: 10px;
	}
</style>